<template>
  <div class="home">
    <div class="home-top">
      <div class="home-top-search">
        <van-search
          v-model="value"
          shape="round"
          background="#4578ff"
          placeholder="请输入搜索关键词"
        />
      </div>

      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in imgList" :key="index">
          <van-image width="100%" height="100" :src="item" />
        </van-swipe-item>
      </van-swipe>

      <van-tabs
        background="#4578ff"
        color="white"
        title-inactive-color="white"
        title-active-color="white"
        @change="changeTab"
      >
        <van-tab v-for="(item, index) in tabList" :title="item" :key="index">
        </van-tab>
      </van-tabs>
    </div>

    <div class="home-bottom">
      <Browse1 v-for="(item, index) in list" :orderBrowse="item" :key="index" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Browse1 from "@/components/Browse.vue";
import swiperImg from "@/assets/image/swip.png";
import { Notify } from "vant";
export default {
  name: "Home",
  components: {
    Browse1,
  },
  data() {
    return {
      list: [], //接口返回 存放订单的一个list数组
      swiperImg,
      role: 0,
      value: "",
      tabList: ["全部", "二手转让", "其他", "岗位招聘", "航拍服务", "行业应用"], //tabs标签list
      imgList: [swiperImg, swiperImg], //轮播图 list
    };
  },
  methods: {
    //改变 tabs标签触发 事件，组件事件返回；两个参数 name，title，name拿到了下标
    //根据下标 传给后端接口  ，type字段控制 数据筛选
    changeTab(name, title) {
      console.log(name, title);
      if (name === 2) {
        if (this.role !== 3) {
         Notify({ type: 'warning', message: '你不是管理员，无法操作' });
        } else {
          this.getTypeData(name);
        }
      } else {
        this.getTypeData(name);
      }
    },
    //根据 type 接口筛选数据
    async getTypeData(type) {
      let res = await this.$api.getOrderList({
        type: type,
      });
      console.log(res);
      this.list = res.data.list;
    },
    async getData() {
      let res = await this.$api.getOrderList({
        type: 0,
      });
      console.log(res);
      this.list = res.data.list;
    },

    async getUserData() {
   
      let res = await this.$api.getUser();
      console.log(res);
      window.sessionStorage.setItem("role", res.role);
      this.role = res.role;
    },
  },
  mounted() {
    this.getUserData();
    //初始化界面，先渲染一个type为0的全部订单列表
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.home {
  background-color: #4578ff;
  &-top {
    // height: 259px;
    width: 100%;
    background-color: #4578ff;
    padding-bottom: 4px;
    &-search {
      padding: 72px 10px 0 10px;
    }
  }
  &-bottom {
    height: 471px;
    border-radius: 16px 16px 0px 0px;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    overflow: scroll;
  }
}

.my-swipe .van-swipe-item {
  padding: 20px;
  box-sizing: border-box;
}
/deep/ .van-tab__text {
  font-size: 13px;
}
/deep/ .van-tab--active {
  font-weight: bold;
}
</style>
